<template>
  <div class="x-card-swiper" :style="cfg.style">
    <Swiper
      :autoplay="cfg.autoplay === 'true' ? { delay: (cfg.delay * 1000) || 3000, disableOnInteraction: false } : false"
      effect="cards" :modules="[EffectCards]" :grab-cursor="true" @init="onInit">
      <swiper-slide v-for="x, i in cfg.data" :key="x.id">
        <div class="item-card">
          <swiper-child-item :data="x" :real-index="i" :axis-id="cfg.axis_id" :swiper="swiperExp" />
        </div>
      </swiper-slide>
    </Swiper>
  </div>
</template>
<script lang="ts" setup name="SwiperCard">
import "swiper/css/effect-cards";
import { EffectCards } from "swiper";
const props = defineProps({
  cfg: {
    type: Object,
    default: () => ({}),
  },
});
const swiperExp = ref(null)

const onInit = (swiper) => {
  swiperExp.value = swiper
}
</script>

<style scoped lang="scss">
.x-card-swiper {
  @apply absolute left-5 z-100 flex justify-center items-center;
  top: 30%;

  .swiper {
    width: 141px;
    height: 305px;

    .swiper-slide {
      display: block;
      border-radius: 9px;
      transform-origin: center;
    }

    .item-card {
      @apply relative cursor-pointer w-full h-full transform-gpu;
      box-sizing: border-box;

      &::after {
        content: "";
        @apply absolute top-0 left-0 right-0 bottom-0 z-1 backdrop-filter backdrop-blur-[18.72px];
        background: linear-gradient(180deg,
            rgba(227, 242, 255, 0.88) 0%,
            rgba(205, 234, 255, 0.78) 100%);
        border-radius: 9px;
      }
    }
  }
}
</style>